<template>
    <view class="list-box">
        <view v-if="list.length">
            <block v-for="(item,index) in list" :key="index" >
                <view class="list-item tn-flex" @click="navigateToFn({ url: '/circleMixinPages/blogger_other?id='+item.id, checkLogin: false })">
                    <!-- 头像 -->
                    <view class="avatar-box" :index="index">
                        <img style="width: 100rpx; height: 100rpx; border-radius: 100%; object-fit: cover;" :src="item.avatar"></img>
                        <tn-badge v-if="item.sex == 1" class="badge" :redius="28" style="background:linear-gradient(270deg, #189EFF 0%, #06FFAA 100%)">
                            <img src="../../static/other/girl.png" style="width: 150%;height: 100%;"></img>
                        </tn-badge>
                        <tn-badge v-if="item.sex==2||item.sex==0" class="badge" :redius="28" style="background:linear-gradient(270deg, #FF6CCE 0%, #F9A1BA 100%);">
                            <img src="../../static/other/girl.png" style="width: 150%;height: 100%;"></img>
                        </tn-badge>
                    </view>
                    <!-- 信息 -->
                    <view class="user-info tn-flex tn-flex-direction-column tn-flex-row-center">
                        <view class="tn-flex tn-flex-col-center">
                            <span class="user-name">{{ item.nickname }}</span>
                            <view v-if="item.vip">
                                 <Grade :item="item"/>
                            </view>
                        </view>
                        <view style="margin: 8rpx 0;">
                            <!-- 星座 -->
                            <!-- <tn-tag v-if="item.shengri.constellation" class="tag" size="sm" shape="circle" width="auto" style="background: #625d85; color: #9d9ab3;">{{ item.shengri.constellation }}</tn-tag> -->
                            <tn-tag v-for="(tag_item, tag_i) in item.tags.split('@')" v-if="item.tags" :index="tag_i" class="tag" size="sm" shape="circle" width="auto" style="background: #625d85; color: #9d9ab3; margin-right:16rpx">{{ tag_item }}</tn-tag>
                        </view>
                        <view style="color: #999999;font-size: 20rpx;height: 28rpx;">{{ item.dec }}</view>

                        <view style="width: 100%" v-if="item.images">
                            <tn-scroll-list :indicator="false" style="padding-bottom: 0;">
                                <view class="img-list tn-flex tn-flex-row-left">
                                    <block v-for="(item, index) in item.images.split(',')" :key="index">
                                        <view style="width: 160rpx; height: 212rpx; border-radius: 10rpx; margin-right: 20rpx; background-color: red;" >
                                            <img :src="item" style="width: 100%; height: 100%;object-fit:cover; border-radius: 10rpx;"></img>
                                        </view>
                                    </block>
                                </view>
                            </tn-scroll-list>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
import Grade from "@/components/grade/index.vue";
export default {
  props: ["list", "type"],
  components: {
    Grade,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.list-box {
  margin: 0 20rpx;
  overflow: hidden;

  .list-item {
    width: 100%;
    height: auto;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.3);
    margin-bottom: 16rpx;
    padding: 24rpx 20rpx;
    overflow: hidden;

    .avatar-box {
      width: 100rpx;
      height: 100rpx;
      border-radius: 100%;
      position: relative;
      .badge {
        position: absolute;
        right: -5rpx;
        bottom: -5rpx;
      }
    }

    .user-info {
      width: calc(100% - 120rpx);
      overflow: hidden;
      margin-left: 20rpx;
      color: #fff;

      .img-list {
        margin-top: 16rpx;
      }

      .user-name {
        max-width: 300rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 20rpx;
      }
    }
  }
}
</style>